<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>

        * {
            margin: 0;
        }

        .box-card {
            width: 600px;
            margin: 0 auto;
        }

        .text {
            font-size: 14px;
        }

        .item {
            margin-bottom: 18px;
        }

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        #person {
            width: 40px;
            height: 40px;
            border-radius: 40px;
        }

        .el-dropdown {
            vertical-align: top;
        }

        .el-dropdown + .el-dropdown {
            margin-left: 15px;
        }

        .el-icon-arrow-down {
            font-size: 12px;
        }

        .layout-header {
            background: #2c3e50;
        }

        .layout-body {
            position: absolute;
            top: 60px;
            left: 0;
            right: 0;
            bottom: 0;

        }

        .layout-aside {
            background: #545c64;

        }

        .layout-main {
            background-image: url("./images/1412.gif");
            background-size: 200px 200px;
            background-repeat: no-repeat;
            background-position: 100% 100%;
        }

        .el-menu-vertical-demo {
            border: 0;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header class="layout-header">
            <div>
                <h1 style="color: aliceblue; margin: 12px 0;">PetHome运营管理平台
                    <div style="text-align: right;font-size: 15px;float: right;">
                        <el-dropdown @command="handleCommand">

                            <img id="person" :src="admin.avatar">

                            <el-dropdown-menu slot="dropdown" v-if="pa=='1'">
                                <el-dropdown-item command="a">个人中心</el-dropdown-item>
                                <el-dropdown-item>账号设置</el-dropdown-item>
                                <el-dropdown-item>问题反馈</el-dropdown-item>
                                <el-dropdown-item command="loginout">退出</el-dropdown-item>
                            </el-dropdown-menu>
                            <el-dropdown-menu slot="dropdown" v-if="pa=='0'">
                                <el-dropdown-item command="login">请先登陆</el-dropdown-item>
                            </el-dropdown-menu>

                        </el-dropdown>
                        &nbsp;
                        <span style="line-height: 44px;font-family: Bahnschrift;color: #f3f3f3">{{admin.username}}</span>
                        &nbsp;&nbsp;
                    </div>

                </h1>
            </div>
        </el-header>
        <el-container class="layout-body">
            <el-aside class="layout-aside">
                <!--      左边栏，显示菜单-->
                <!-- el-menu是整个菜单 -->
                <el-menu @select="handleSelect"
                         background-color="#545c64"
                         text-color="#fff"
                         active-text-color="#ffd04b"
                         class="el-menu-vertical-demo">
                    <!-- el-submenu是允许包含子级的菜单，但此标签本身并不是菜单项 -->
                    <el-submenu index="1">
                        <!-- 在el-submenu下的template用于配置包含子菜单的父级项 -->
                        <!-- 例如：在“用户管理”下有“用户列表”和“添加用户”，此处使用template配置的就是“用户管理” -->
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>管理员管理</span>
                        </template>
                        <el-menu-item index="1-1">
                            <i class="el-icon-user"></i>
                            <span>管理员列表</span>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <i class="el-icon-circle-plus-outline"></i>
                            <span>添加管理员</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-user-solid"></i>
                            <span>用户管理</span>
                        </template>
                        <!--            el-menu-item 菜单项-->
                        <el-menu-item index="/admin/user/list">
                            <i class="el-icon-document-checked"></i>

                            <span>用户列表</span>
                        </el-menu-item>
                        <el-menu-item index="/admin/user/add-new">
                            <i class="el-icon-document-add"></i>
                            <span>添加用户</span>
                        </el-menu-item>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-setting"></i>
                            <span>商品管理</span>
                        </template>
                        <el-menu-item index="3-1">
                            <i class="el-icon-document-checked"></i>
                            <span>商品列表</span>
                        </el-menu-item>
                        <el-menu-item index="3-2">
                            <i class="el-icon-document-add"></i>
                            <span>添加商品</span>
                        </el-menu-item>
                    </el-submenu>

                </el-menu>
            </el-aside>
            <el-main class="layout-main">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/adminList.html' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/admin/admins/list">成员管理</a></el-breadcrumb-item>
                </el-breadcrumb>
                <h3 style="margin: 20px 0 20px 0">成员管理</h3>
                <!--管理员列表-->
                <el-table v-if="selectedIndex=='1-1'"
                          :data="tableData"
                          border
                          style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="ID"
                            width="80">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="用户名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="nickname"
                            label="昵称">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="手机号码">
                    </el-table-column>
                    <el-table-column
                            prop="email"
                            label="电子邮箱">
                    </el-table-column>
                    <el-table-column
                            prop="description"
                            label="职位">
                    </el-table-column>
                    <el-table-column
                            prop="lastLoginIp"
                            label="最后登录ip">
                    </el-table-column>
                    <el-table-column
                            prop="enable"
                            label="是否启用"
                            width="90"
                            align="center">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.enable"
                                    @change="handleChangeEnable(scope.row.id, scope.row.enable)"
                                    :active-value="1"
                                    :inactive-value="0"
                                    active-color="#13ce66"
                                    inactive-color="#999">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    type="primary" icon="el-icon-edit" circle
                                    @click="handleEdit(scope.row.id)"></el-button>
                            <el-button
                                    v-if="scope.row.id!='1'"
                                    type="danger"
                                    icon="el-icon-delete" circle
                                    @click="openDeleteConfirm(scope.row.id)">
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--添加管理员-->
                <el-card v-if="selectedIndex=='1-2'" class="box-card">
                    <div slot="header" class="clearfix">
                        <span>添加管理员</span>
                    </div>
                    <div class="text item">
                        <el-form :model="adminNew" :rules="rules" ref="ruleForm" label-width="100px"
                                 class="demo-ruleForm">
                            <el-form-item label="管理员名称" prop="username">
                                <el-input v-model="adminNew.username"></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="password">
                                <el-input type="password" v-model="adminNew.password" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="确认密码" prop="checkPass">
                                <el-input type="password" v-model="adminNew.checkPass" autocomplete="off"></el-input>
                            </el-form-item>
                            <el-form-item label="管理员昵称" prop="nickname">
                                <el-input v-model="adminNew.nickname"></el-input>
                            </el-form-item>
                            <el-form-item label="管理员电话" prop="avatar">
                                <el-input v-model="adminNew.avatar"></el-input>
                            </el-form-item>
                            <el-form-item label="管理员头像" prop="phone">
                                <el-input v-model="adminNew.phone"></el-input>
                            </el-form-item>
                            <el-form-item label="管理员身份" prop="description">
                                <el-select v-model="adminNew.description" placeholder="请选择身份">
                                    <el-option label="最高管理员" value="最高管理员"></el-option>
                                    <el-option label="超级管理员" value="超级管理员"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="管理员邮箱" prop="email">
                                <el-input v-model="adminNew.email"></el-input>
                            </el-form-item>
                            <el-form-item label="是否启用" prop="enable">
                                <el-switch v-model="adminNew.enable==1"></el-switch>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('adminNew')">立即创建</el-button>
                                <el-button @click="resetForm('adminNew')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>

                <el-card v-if="selectedIndex=='3-2'" class="box-card">
                    <div slot="header" class="clearfix">
                        <span>添加商品</span>
                    </div>
                    <div class="text item">
                        <el-form :model="goodsAdd" :rules="rules3" ref="ruleForm" label-width="100px"
                                 class="demo-ruleForm" style="margin: 0 auto">
                            <el-form-item label=商品名称" prop="goodsName" label-width="150px">
                                <el-input v-model="goodsAdd.goodsName" style="width: 500px"></el-input>
                            </el-form-item>
                            <el-form-item label="商品简介" prop="description" label-width="150px">
                                <el-input v-model="goodsAdd.description" style="width: 500px"></el-input>
                            </el-form-item>
                            <el-form-item label="商品价格" prop="listPrice" label-width="150px">
                                <el-input v-model="goodsAdd.listPrice"></el-input>
                            </el-form-item>
                            <el-form-item label="商品库存" prop="stock" label-width="150px">
                                <el-input v-model="goodsAdd.stock"></el-input>
                            </el-form-item>
                            <el-form-item label="品牌名称" prop="brandName" label-width="150px">
                                <el-input v-model="goodsAdd.brandName"></el-input>
                            </el-form-item>
                            <el-form-item label="类别名称" prop="categoryName" label-width="150px">
                                <el-input v-model="goodsAdd.categoryName"></el-input>
                            </el-form-item>
                            <el-form-item label="关键词" prop="keywords" label-width="150px">
                                <el-input v-model="goodsAdd.keywords"></el-input>
                            </el-form-item>
                            <el-form-item label="标签列表" prop="tags" label-width="150px">
                                <el-input v-model="goodsAdd.tags"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="goodsAdd1()">立即创建</el-button>
                                <el-button @click="resetForm('ruleForm')">重置</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<!--引入Vue框架-->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script>
    setInterval(
        function () {
            let jwt = localStorage.getItem("jwt");

            console.log("定时发请求了")
            let url = "http://localhost:8847/admins/jwt"
            axios.create({
                headers: {
                    'Authorization': jwt
                }
            }).get(url).then((response) => {
                let code = response.data.code
                console.log(response.data)
                if (code == 40300) {
                    alert(response.data.message)
                    localStorage.clear()
                    location.href = "/adminLogin.html"
                }
            })


        }, 1000 * 60
    );
</script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.adminNew.checkPass !== '') {
                        this.$refs.adminNew.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.adminNew.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }
            return {
                selectedIndex: "1-1",
                tableData: [],
                admin: {avatar: "/avatar/default.jpeg", username: '    '},
                adminNew: {
                    username: "",
                    password: "",
                    checkPass: "",
                    nickname: "",
                    avatar: "",
                    phone: '',
                    description: '',
                    email: '',
                    enable: '1',
                },
                goodsAdd: {},
                pa: "0",
                rules: {
                    username: [
                        {required: true, message: '请输入管理员名称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    nickname: [
                        {required: true, message: '请输入管理员昵称', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    avatar: [
                        {required: true, message: '请输入管理员头像', trigger: 'blur'},
                        {min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur'}
                    ],
                    phone: [
                        {required: true, message: '请输入管理员电话', trigger: 'blur'},
                        {min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入管理员邮箱', trigger: 'blur'},
                        {min: 6, max: 11, message: '长度在 6 到 11 个字符', trigger: 'blur'}
                    ],
                    description: [
                        {required: true, message: '请选择管理员身份', trigger: 'change'}
                    ],
                },

                rules3: {
                    goodsName: [
                        {required: true, message: '请输入商品名称', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
                    ],
                    description: [
                        {required: false, message: '请输入商品简介', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
                    ],
                    listPrice: [
                        {required: true, message: '请输入商品价格', trigger: 'blur'},
                    ],
                    stock: [
                        {required: true, message: '商品库存', trigger: 'blur'},
                        {pattern: /^[1-9]{2}[0-9]?$/, message: '必须是0-999的数', trigger: 'blur'}
                    ],
                    brandName: [
                        {required: false, message: '请输入品牌名称', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
                    ],
                    categoryName: [
                        {required: false, message: '请输入类别名称', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
                    ],
                    keywords: [
                        {required: false, message: '请输入商品关键字', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
                    ],
                    tags: [
                        {required: false, message: '请输入标签列表', trigger: 'blur'},
                        {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            goodsAdd1() {
                let url = 'http://localhost:8847/admins-supplies/add';
                axios.create({headers: {'Authorization': localStorage.getItem('jwt')}}).post(url, v.goodsAdd).then(function (response) {
                    console.log(response.data);
                    if (response.data.code == 200) {
                        console.log(v.goodsAdd)
                        v.$message({
                            message: '添加品牌成功！',
                            type: 'success'
                        });
                    } else {
                        v.$message.error(response.data.message);
                    }
                }).catch(function (error) {
                    console.log('响应结果为失败！');
                })
            },
            handleChangeEnable(id, enable) {
                let jwt = localStorage.getItem("jwt");
                console.log(id, enable)
                let admin = {id: id, enable: enable}
                let url = "http://localhost:8847/admins/edit"
                axios.create({
                    headers: {
                        'Authorization': jwt
                    }
                }).post(url, admin)
            },

            openDeleteConfirm(id) {
                this.$confirm('此操作将永久删除该管理员, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.handleDelete(id);

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleDelete(id) {
                let jwt = localStorage.getItem("jwt");
                console.log("将删除的id=" + id);
                let url = "http://localhost:8847/admins/" + id + "/delete/"
                axios.create({
                    headers: {
                        'Authorization': jwt
                    }
                }).post(url).then((response) => {
                    if (response.data.code == 200) {
                        this.$message({message: "删除管理员成功", type: "success"})

                    } else {
                        this.$message.error(response.data.message)
                    }
                    this.loadAdmins();
                })
            },
            handleCommand(command) {
                if (command == 'loginout') {
                    this.$confirm('是否确认退出?', '提示', {
                        confirmButtonText: '退出',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        localStorage.clear();
                        location.href = "/adminLogin.html"

                    }).catch(() => {

                    });

                } else if (command == 'login') {
                    location.href = '/adminLogin.html'
                }
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            handleSelect(index) {
                v.selectedIndex = index;
            },

            bannerDelete(index, banner) {
                axios.get("/banner/delete?id=" + banner.id).then(function () {
                    v.bannerArr.splice(index, 1);
                })
            },
            loadAdmins: function () {
                let jwt = localStorage.getItem("jwt");
                if (jwt != null) {
                    axios.create({
                        headers: {
                            'Authorization': jwt
                        }
                    }).get("http://localhost:8847/admins/list").then(function (response) {
                        v.tableData = response.data.data;

                    })
                }
            }
        },
        mounted() {
            let jwt = localStorage.getItem("jwt");
            this.loadAdmins();

            axios.create({
                headers: {
                    'Authorization': jwt
                }
            }).get("http://localhost:8847/admins/curadmin").then(function (response) {
                v.admin = response.data.data;
                v.pa = '1'
                console.log(v.admin)
            })

            axios.get("/category/select").then(function (response) {
                v.categoryArr = response.data;
            })
            axios.get("/banner/select").then(function (response) {
                v.bannerArr = response.data;
            })
            axios.get("/product/select").then(function (response) {
                v.productArr = response.data;
            })
        }
    })
</script>
</html>